{extend name="$base" /}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="ADMIN_CSS/wap_bottom_type.css">
<script src="__STATIC__/js/ajax_file_upload.js" type="text/javascript"></script>
<script src="__STATIC__/js/file_upload.js" type="text/javascript"></script>
<style>
.custom-template {
	display: block;
    float: unset;
    height: unset;
	margin-left: 0;
    background: #fff;
    margin-top: 20px;
}
.pc-temp-img {
    background-size: 100%;
    padding-bottom: 470px;
    background-repeat: no-repeat;
    width: 1000px;
}
.ns-main article {
	width: 1000px;
}
</style>
{/block}
{block name="main"}
<div class="ns-main">
	<article>
		<div class="cont categoty">
			<div class="control-footer-list">
				<div class="control-edit text-color">
					<label>模版选择：</label>
					<label for="waptype1" class="radio inline normal">
						<i class="radio-common">
							<input type="radio" value="1" name="waptype" id="waptype1" />
						</i>
						<span>一级分类</span>
					</label>
					<label for="waptype2" class="radio inline normal">
						<i class="radio-common">
							<input type="radio" value="2" name="waptype" id="waptype2" />
						</i>
						<span>二级分类</span>
					</label>
					<label for="waptype3" class="radio inline normal">
						<i class="radio-common">
							<input type="radio" value="3" name="waptype" id="waptype3"/>
						</i>
						<span>三级分类</span>
					</label>
				</div>
			</div>
			<div class="control-edit text-color">
				<label>分类图：</label>
				<div class="wappicture">
					<div class="wapstyleselect select-wap is-img selectwap" data-val="0" id="picture0">
						<span>无图模式</span>
					</div>
					<div class="wapstyleselect select-wap" id="picture1" data-val="1">
						<span>有图模式</span>
					</div>
				</div>
			</div>
			<div class="control-footer-list">
				<div class="control-edit text-color">
					<label>名称展示：</label>
					<label for="is_use0" class="radio inline normal">
						<i class="radio-common">
							<input type="radio" value="0" name="is_use" id="is_use0" />
						</i>
						<span>全称</span>
					</label>
					<label for="is_use1" class="radio inline normal">
						<i class="radio-common">
							<input type="radio" value="1" name="is_use" id="is_use1" />
						</i>
						<span>简称</span>
					</label>
				</div>
			</div>
		</div>
		
	</article>
	<article class="custom-template">
		<div class="pc-temp-img"></div>
	</article>
	<div style="text-align:center;padding:10px;">
		<button class="btn-common btn-big js-save" onclick="save()">保存</button>
		<button class="btn-common-cancle btn-big" onclick="javascript:history.back(-1);">返回</button>
	</div>
</div>
<script>
var data_img = {
	'data-temp-1-0' : "ADMIN_IMG/goods/pccate1.png", 
	'data-temp-1-1' : "ADMIN_IMG/goods/pccate5.png", 
	'data-temp-2-1' : "ADMIN_IMG/goods/pccate3.png",
	'data-temp-2-0' : "ADMIN_IMG/goods/pccate2.png", 
	'data-temp-3-0' : "ADMIN_IMG/goods/pccate4.png", 
	'data-temp-3-1' : "ADMIN_IMG/goods/pcpicture.png"
};

var data = {
	'template' : 1,
	'is_img' : 0,
	'is_use' : 0,
};

var new_data = {$info ? $info : '""'};
init();
function init() {
	$('.is-img.selectwap').removeClass('selected');
	if(new_data != '') {
		$('#waptype'+new_data['template']).parent().addClass("selected");
		$('#waptype'+new_data['template']).attr("checked", true);
		$('#is_use'+new_data['is_use']).parent().addClass("selected");
		$('#is_use'+new_data['is_use']).attr("checked", true);
		$('.is-img.selectwap').removeClass('selectwap');
		$('#picture'+new_data['is_img']).addClass("selectwap");
		category_img(new_data['template'], new_data['is_img']);
	}else {
		$('#waptype'+data['template']).parent().addClass("selected");
		$('#waptype'+data['template']).find('input').attr("checked", true);
		$('#is_use'+data['is_use']).parent().addClass("selected");
		$('#is_use'+data['is_use']).find('input').attr("checked", true);
		$('.is-img.selectwap').removeClass('selectwap');
		$('#picture'+new_data['is_img']).addClass("selectwap");
		category_img(data['template'], data['is_img']);
	}
}

$(".radio-common").click(function(){
	var radio = $(this).children("input");
	var temp_val = $('input[name="waptype"]:checked').val();
	var is_use = $('input[name="is_use"]:checked').val();
	var img_val = $('.wapstyleselect.select-wap.selectwap').attr('data-val');
	 
	data['template'] = temp_val;
	data['is_img'] = img_val;
	data['is_use'] = is_use;
	category_img(temp_val, img_val);
});

$('.select-wap').click(function(){
	var temp_val = $('input[name="waptype"]:checked').val();
	var img_val = $(this).attr('data-val');
	var is_use = $('input[name="is_use"]:checked').val();
	data['template'] = temp_val;
	data['is_img'] = img_val;	
	data['is_use'] = is_use;
	category_img(temp_val, img_val);
	
	$(this).addClass('selectwap');
	$(this).siblings().removeClass('selectwap');
});

function category_img(temp_id, img_val) {
	var val = 'data-temp-'+temp_id+'-'+img_val;
	var img = data_img[val];
	$('.pc-temp-img').css("background-image","url("+img+")");
}

function save() {
	$.ajax({
		url : "{:__URL('ADMIN_MAIN/config/editwebcategorydisplay')}",
		type : 'post',
		data : {'data' : JSON.stringify(data)},
		dataType : 'JSON',
		success: function(res) {
			if(res.code > 0) {
				showTip(res.message,"success");
			}else {
				showTip(res.message,"error");
			}
		}
	})
}
</script>
{/block}